<template>
    <div class="login_container">
        <div class="_flex top">
            <div class="top_logo">
                <img src="../../assets/images/login_logo_1.png" alt="图片加载失败">
            </div>
            <div>
                <span>体温监测动态感知SaaS平台教育版</span>
                <span>Temperature monitoring dynamic perception platform Education Edition</span>
            </div>
        </div>
        <div class="_flex sss" :style="{ transform: `scale(${width / 1920})` }">
            <div class="loign_logo">
                <img src="../../assets/images/login_logo_2.png" alt="图片加载失败">
                <img src="../../assets/images/login_Calligraphy.png" alt="图片加载失败">
            </div>
            <div class="login_box" v-if="type == 1">
                <div class="zc">
                    <span>登录</span>
                    <div class="_sp">
                        <span class="cursor">申请注册<i>></i></span>
                        <span class="cursor" @click="handle({ type: 4 })">使用短信登录<i>></i></span>
                    </div>
                </div>
                <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="">
                        <div class="fx">
                            <i class="el-icon-mobile-phone _icon1"></i>
                            <div class="_el-ipt" :class="{ 'error': rules.mobileError }">
                                <el-input v-number-input v-model="ruleForm.mobile" clearable placeholder="请输入手机号码" @blur="setError('rules', 'mobile', ruleForm)"></el-input>
                                <span class="_span" v-if="rules.mobileError">{{ rules.mobileMessage }}</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="fx">
                            <i class="el-icon-lock _icon1"></i>
                            <div class="_el-ipt" :class="{ 'error': rules.passwordError }">
                                <el-input placeholder="请输入密码" v-model="ruleForm.password" clearable show-password @blur="setError('rules', 'password', ruleForm)"></el-input>
                                <span class="_span" v-if="rules.passwordError">{{ rules.passwordMessage }}</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="fx">
                            <i class="el-icon-message _icon2"></i>
                            <div class="_el-ipt" :class="{ 'error': rules.useryzmcodeError }">
                                <el-input v-model="ruleForm.useryzmcode" clearable placeholder="请输入验证码" @blur="setError('rules', 'useryzmcode', ruleForm)"></el-input>
                                <span class="_span" v-if="rules.useryzmcodeError">{{ rules.useryzmcodeMessage }}</span>
                            </div>
                            <div class="imgBox cursor" @click="getImg"></div>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button class="dl" :disabled="dlDisabled" @click="loginForm('ruleForm', { type: 0 })">登录</el-button>
                    </el-form-item>
                    <el-form-item label="" class="mrT0">
                        <div class="_dl_">
                            <span class="cursor" @click="handle({ type: 2 })">忘记密码?</span>
                            <span class="cursor" @click="handle({ type: 3 })">修改密码</span>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="login_box" v-if="type == 2">
                <div class="zc cursor _back"><span @click="handle({ type: 1 })">返回</span></div>
                <el-form :model="ruleForm1" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="">
                        <div class="fx">
                            <i class="el-icon-mobile-phone _icon1"></i>
                            <div class="_el-ipt" :class="{ 'error': rules1.mobileError }">
                                <el-input v-number-input v-model="ruleForm1.mobile" clearable placeholder="请输入手机号码" @blur="setError('rules1', 'mobile', ruleForm1)"></el-input>
                                <span class="_span" v-if="rules1.mobileError">{{ rules1.mobileMessage }}</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="fx">
                            <i class="el-icon-message _icon2"></i>
                            <div class="_el-ipt" :class="{ 'error': rules1.yzmcodeError }">
                                <el-input v-number-input v-model="ruleForm1.yzmcode" clearable placeholder="请输入手机号码" @blur="setError('rules1', 'yzmcode', ruleForm1)"></el-input>
                                <span class="_span" v-if="rules1.yzmcodeError">{{ rules1.yzmcodeMessage }}</span>
                            </div>
                            <el-button :disabled="!flag" class="btn" @click="send">{{flag?'发送验证码':num}}</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="fx">
                            <i class="el-icon-lock _icon1"></i>
                            <div class="_el-ipt" :class="{ 'error': rules1.passwordError }">
                                <el-input v-model="ruleForm1.password" clearable placeholder="请输入重设密码" show-password @blur="setError('rules1', 'password', ruleForm1)"></el-input>
                                <span class="_span" v-if="rules1.passwordError">{{ rules1.passwordMessage }}</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button :disabled="!ruleForm1.yzmcode" class="dl" @click="forgetthepassword('rules1', { type: 1 })">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="login_box" v-if="type == 3">
                <div class="zc cursor _back"><span @click="handle({ type: 1 })">返回</span></div>
                <div class="_m">这是为您的账号{{ruleForm.mobile}}修改密码</div>
                <el-form :model="ruleForm2" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="">
                        <div class="_el-ipt" :class="{ 'error': rules2.originalpasswordError }">
                            <el-input v-number-input v-model="ruleForm2.originalpassword" clearable placeholder="请输入原密码" show-password @blur="setError('rules2', 'originalpassword', ruleForm2)"></el-input>
                            <span class="_span" v-if="rules2.originalpasswordError">{{ rules2.originalpasswordMessage }}</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="_el-ipt" :class="{ 'error': rules2.passwordError }">
                            <el-input v-number-input v-model="ruleForm2.password" clearable placeholder="请输入新密码" show-password @blur="setError('rules2', 'password', ruleForm2)"></el-input>
                            <span class="_span" v-if="rules2.passwordError">{{ rules2.passwordMessage }}</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="_el-ipt" :class="{ 'error': rules2.password1Error }">
                            <el-input v-model="ruleForm2.password1" clearable placeholder="请确认新密码" show-password @blur="setError('rules2', 'password1', ruleForm2, 'password')"></el-input>
                            <span class="_span" v-if="rules2.password1Error">{{ rules2.password1Message }}</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button class="dl" @click="updatepassword('rules2', { type: 1 })">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="login_box" v-if="type == 4">
                <div class="zc cursor _back"><span @click="handle({ type: 1 })">返回</span></div>
                <el-form :model="ruleForm4" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="">
                        <div class="fx">
                            <i class="el-icon-mobile-phone _icon1"></i>
                            <div class="_el-ipt" :class="{ 'error': rules4.mobileError }">
                                <el-input v-number-input v-model="ruleForm4.mobile" clearable placeholder="请输入手机号码" @blur="setError('rules4', 'mobile', ruleForm4)"></el-input>
                                <span class="_span" v-if="rules4.mobileError">{{ rules4.mobileMessage }}</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="fx">
                            <i class="el-icon-message _icon2"></i>
                            <div class="_el-ipt" :class="{ 'error': rules4.loginCodeError }">
                                <el-input v-number-input v-model="ruleForm4.loginCode" clearable placeholder="请输入短信验证码" @blur="setError('rules4', 'loginCode', ruleForm4, 'loginCode1')"></el-input>
                                <span class="_span" v-if="rules4.loginCodeError">{{ rules4.loginCodeMessage }}</span>
                            </div>
                            <el-button :disabled="!flag" class="btn" @click="send({ type: 4 })">{{flag?'发送验证码':num}}</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button :disabled="!ruleForm4.loginCode" class="dl" @click="dl('rules4', { type: 1 })">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="_flex bottom">
            <div class="tm_1">
                <img src="../../assets/images/login_icon_1.png" alt="图片加载失败">
                <img src="../../assets/images/login_icon_2.png" alt="图片加载失败">
                <img src="../../assets/images/login_icon_3.png" alt="图片加载失败">
                <span class="sp1">www.enfucellai.com</span>
                <img src="../../assets/images/login_icon_4.png" alt="图片加载失败">
                <span class="sp2">+86 075586968816</span>
            </div>
            <div class="tm_2">
                <span>Copyright</span>
                <img src="../../assets/images/login_c.png" alt="图片加载失败">
                <span>2020 Shenzhen Enfucell All Technology Co.Ltd . Rights reserved</span>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'login',
    data() {
        return {
            width: 1920,
            ruleForm: {
                mobile: null,
                useryzmcode: null,
                password: null
            },
            dlDisabled: false,
            rules: {
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur', type: 1 },
                    { required: true, message: '请输入合法的手机号码', trigger: 'blur', type: 2 }
                ],
                useryzmcode: [
                    { required: true, message: '请输入验证码', trigger: 'blur', type: 1 },
                ],
                password: [
                    { required: true, message: '请输入验密码', trigger: 'blur', type: 1 },
                ]
            },
            ruleForm1: {
                mobile: null,
                yzmcode: null,
                password: null
            },
            rules1: {
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur', type: 1 },
                    { required: true, message: '请输入合法的手机号码', trigger: 'blur', type: 2 }
                ],
                yzmcode: [
                     { required: true, message: '请输入验证码', trigger: 'blur', type: 1 },
                ],
                password: [
                    { required: true, message: '请输入验密码', trigger: 'blur', type: 1 },
                ]
            },
            ruleForm2: {
                originalpassword: null,
                password: null,
                password1: null
            },
            rules2: {
                originalpassword: [
                    { required: true, message: '请输入原密码', trigger: 'blur', type: 1 }
                ],
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur', type: 1 },
                ],
                password1: [
                    { required: true, message: '请确认密码', trigger: 'blur', type: 1 },
                    { required: true, message: '两次输入不一致，请重新输入', trigger: 'blur', type: 3 },
                ]
            },
            ruleForm4: {
                mobile: null,
                loginCode: null,
                loginCode1: null
            },
            rules4: {
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur', type: 1 },
                    { required: true, message: '请输入合法的手机号码', trigger: 'blur', type: 2 }
                ],
                loginCode: [
                    { required: true, message: '请输入验证码', trigger: 'blur', type: 1 },
                    { required: true, message: '验证码不正确，请重新输入', trigger: 'blur', type: 3 }
                ]
            },
            flag: true,
            num: 180,
            timer: null,
            type: 1,
            imgData: null,
            randomnumber: 0
        }
    },
    created() {
        this.getImg()
    },
    methods: {
        handle({ type }) {
            if (type == 3) {
                if (this.setError('rules', 'mobile', this.ruleForm)) this.type = type
            } else {
                this.type = type
                if (type == 1) this.setImg(this.imgData)
            }
        },
        // 获取验证图片
        getImg() {
            this.randomnumber = Date.parse(new Date()) / 1000
            axios({
                url: '/code/image',
                baseURL: '/api',
                method: 'post',
                // axios里的responseType 默认返回数据类型是 json，将其改为返回数据类型 blob。
                responseType: 'blob',
                emulateJSON: true,
                params: { randomnumber: this.randomnumber }
            }).then(res => {
                this.imgData = res
                this.setImg(this.imgData)
            })
        },
        setImg(res) {
            setTimeout(() => {
                var blob = res.data
                var removeObj = document.querySelector('.imgBox').querySelector('img')
                if (removeObj) removeObj.parentNode.removeChild(removeObj)
                const img = document.createElement('img')
                img.onload = function(e) {
                    // 元素的onload 事件触发后将销毁URL对象, 释放内存。
                    window.URL.revokeObjectURL(img.src)
                }
                // 浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL。
                // 这个 URL 以blob: 开头,表明对应一个 Blob 对象。
                img.alt = '加载的图片暂时没数据'
                img.src = window.URL.createObjectURL(blob)
                img.styledisplay = 'block'
                document.querySelector('.imgBox').appendChild(img)
            }, 50)
        },
        // 获取 短信验证码
        send({ type }) {
            var valid = true
            if (type && type == 4) {
                valid = this.setError('rules4', 'mobile', this.ruleForm4)
            } else {
                valid = this.setError('rules1', 'mobile', this.ruleForm1)
            }
            if (!valid) return
            this.$http('code/mobile/sendcaptcha', {  mobile: type && type == 4 ? this.ruleForm4.mobile*1 : this.ruleForm1.mobile*1 }).then(res => {
                if (res.code == 200) {
                    this.flag=false
                    if (type == 4) this.ruleForm4.loginCode1 = res.data.yzmcode
                    this.count()
                } else {
                    this.$notify.error(res.message)
                }
            })
        },
        count(){
          this.timer=setInterval(()=>{
            this.num--;
            if(this.num == 0){
              clearInterval(this.timer)
              this.num = 180
              this.flag = true
            }
          }, 1000)
        },
        // 手机验证码登陆
        dl(formName) {
            var valid = true
            const arr = ['mobile', 'loginCode']
            arr.map(name => {
                const rs = this.setError('rules4', name, this.ruleForm4, name == 'loginCode' ? 'loginCode1' : '')
                if (!rs) valid = rs
            })
            if (!valid) return
            // this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http('/login/logincheck',
                        {
                            mobile: this.ruleForm4.mobile*1,
                            yzmcode: this.ruleForm4.loginCode
                        }
                    ).then(({ code, message, data }) => {
                        if (code != 200) {
                            this.$notify.error(message)
                            return
                        }
                        this.timer=null,
                        this.flag=true
                        this.num=180
                        localStorage.setItem('token', data.messagetoken)
                        this.$notify.success(message)
                        this.$router.push('/index')
                    })
                }
            // })
        },
        // 用户密码图形验证码登录
        loginForm(formName) {
            var valid = true
            const arr = ['mobile', 'useryzmcode', 'password']
            arr.forEach(name => {
                const rs = this.setError('rules', name, this.ruleForm)
                if (!rs) valid = rs
            })
            if (valid) {
                this.dlDisabled = true
                this.$http('login/form', {
                    useryzmcode: this.ruleForm.useryzmcode,
                    username: this.ruleForm.mobile * 1,
                    password: this.ruleForm.password,
                    randomnumber: this.randomnumber
                }).then(({ code, message, data }) => {
                    this.dlDisabled = false
                    if (code != 200) {
                        this.$notify.error(message)
                        return
                    }
                    localStorage.setItem('token', data.messagetoken)
                    this.$notify.success(message)
                    this.$router.replace('/index')
                }).catch(() => {
                    this.dlDisabled = false
                })
            }
        },
        // 找回密码确认
        forgetthepassword(formName) {
            var valid = true
            const arr = ['mobile', 'yzmcode', 'password']
            arr.map(name => {
                const rs = this.setError('rules1', name, this.ruleForm1)
                if (!rs) valid = rs
            })
            if (!valid) return
            this.$http('user/forgetthepassword', {
                "mobile": this.ruleForm1.mobile,
                "yzmcode": this.ruleForm1.yzmcode, //  #短信验证码
                "password": this.ruleForm1.password // 新密码
            }).then(({ code, message }) => {
                if (code != 200) {
                    this.$notify.error(message)
                    return
                }
                this.$notify.success(message)
                this.$set(this.ruleForm, 'mobile', this.ruleForm1.mobile)
                this.type = 1
                this.setImg(this.imgData)
            })
        },
        // 修改密码
        updatepassword() {
            var valid = true
            const arr = ['originalpassword', 'password', 'password1']
            arr.map(name => {
                const rs = this.setError('rules2', name, this.ruleForm2, name == 'password1' ? 'password' : '')
                if (!rs) valid = rs
            })
            if (!valid) return
            this.$http('user/updatepassword', {
                "mobile": this.ruleForm.mobile,
                "originalpassword": this.ruleForm2.originalpassword,
                "password": this.ruleForm2.password
            }).then(({ code, message }) => {
                if (code != 200) {
                    this.$notify.error(message)
                    return
                }
                this.$notify.success(message)
                this.type = 1
                this.setImg(this.imgData)
            })
        },
        // 错误验证
        setError(rulesName, name, ruleForm, name2) {
            var res = true
            const arr = this[rulesName][name]
            for(var i = 0 ; i < arr.length ; i++) {
                if (arr[i].type == 1) {
                    if (!ruleForm[name]) {
                        res = false
                        this.$set(this[rulesName], name + 'Error', true)
                        this.$set(this[rulesName], name + 'Message', arr[i].message)
                        break;
                    } else {
                        this.$set(this[rulesName], name + 'Error', false)
                    }
                } else if (arr[i].type == 2) {
                    if (!/^1[3456789]\d{9}$/.test(ruleForm[name])) {
                        res = false
                        this.$set(this[rulesName], name + 'Error', true)
                        this.$set(this[rulesName], name + 'Message', arr[i].message)
                        break;
                    } else {
                        this.$set(this[rulesName], name + 'Error', false)
                    }
                } else if (arr[i].type == 3) {
                    if (ruleForm[name] != ruleForm[name2]) {
                        res = false
                        this.$set(this[rulesName], name + 'Error', true)
                        this.$set(this[rulesName], name + 'Message', arr[i].message)
                    } else {
                        this.$set(this[rulesName], name + 'Error', false)
                    }
                }
            }
            return res
        },
        resize () {
          this.width = document.body.offsetWidth
        }
    },
    mounted () {
      this.resize()
      window.addEventListener('resize', this.resize)
    },
    beforeDestroy () {
      window.removeEventListener('resize', this.resize)
    }
}
</script>

<style scoped lang="less">
    ._flex {
        position: absolute;
        left: 0;
        right: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
    }
    .login_container {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #00247c;
    }
    .sss {
        -ms-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
        width: 740px;
        margin: -180px auto 0;
        top: 50%;
        // margin: 20px auto;
        background-color: #fff;
        border-radius: 13px;
        padding: 26px;
        z-index: 200;
        border: 1px solid #00247c;
    }

    .loign_logo {
        padding-left: 25px;
        flex: 1;
        img:nth-child(1) {
            margin: 23px 0;
        }
    }

    .login_box {
        width: 380px
    }

    .top {
        width: 100%;
        margin: 95px auto;
        -ms-flex-direction: row;
        flex-direction: row;
        color: #fff;
        justify-content: center;
        align-items: center;
        z-index: 200;
        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            span:nth-child(1) {
                font-size: 38px;
            }
            span:nth-child(2) {
                font-size: 16px;
            }
        }
        .top_logo {
            margin-right: 15px;
        }
    }

    .bottom {
        bottom: 0;
        width: 100%;
        height: 142px;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        align-items: center;
        background-color: #fff;
        .tm_1 {
            margin-bottom: 30px;
            margin-top: 47px;
            display: flex;
            flex-direction: row;
            align-items: center;
            img:nth-child(2),
            img:nth-child(3) {
                margin-left: 40px;
            }
            .sp1 {
                padding-top: 10px;
                margin-left: 10px;
                margin-right: 28px;
            }
            .sp2 {
                padding-top: 10px;
                margin-left: 12px;
            }
        }
        div span {
            color: #00247c;
        }
    }


    ._icon3 {
        font-size: 70px;
        margin-right: 22px;
    }

    .zc {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        &>span:nth-child(1) {
            color: #022a83;
        }
        span {
            color: #00247c;
            font-size: 20px;
            i {
                color: #7cccff;
            }
        }
    }

    /deep/ .el-input__inner:focus,
    /deep/ .el-input__inner:hover {
        border-color: #4061ce;
    }

    .title {
        margin-bottom: 24px;
        text-align: left;
        font-weight: 500;
    }

    .fx {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    /deep/ .el-form-item {
        margin-top: 20px!important;
    }

    .el-button {
        border-color: #1d28a7;
        color: #fff;
        background: #1d28a7;
        margin-left: 10px;
    }

    .dl.el-button {
        width: 100%;
        margin-top: 46px;
        margin-left: 0px;
        background: #1e29aa;
        border-color: #1e29aa;
        border-radius: 24px;
    }

    /deep/ .el-form-item__content {
        margin-left: 0px!important;
    }

    /deep/ .el-input__inner {
        background-color: transparent;
        border-color: #616572;
        border: none;
        border-bottom: 1px solid #00247c;
        border-radius: 0px;
        color: #000;
    }

    .btn {
        padding: 6px 20px;
    }

    /deep/ .el-form-item {
        margin-bottom: 0px;
        margin-top: 28px;
    }

    ._icon1,
    ._icon2 {
        color: #35559c;
        font-size: 28px;
        margin-right: 6px;
    }

    .imgBox {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
    }

    .cursor {
        cursor: pointer;
    }

    ._dl_ {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .mrT0 {
        margin-top: 0px !important;
        /deep/ .el-form-item__content {
            line-height: 18px!important;
        }
        span {
            color: #00247c;
            margin-top: 18px;
            margin-left: 10px;
            border-bottom: 1px solid #00247c;
            padding-bottom: 3px;
        }
    }

    /deep/ .el-form-item__error {
        padding-left: 34px;
    }

    ._el-ipt {
        flex: 1;
        position: relative;
        ._span {
            position: absolute;
            left: 0;
            bottom: -32px;
            font-size: 12px;
        }
    }

    ._el-ipt.error {
        ._span {
            color: #F56C6C;
        }
        /deep/ .el-input__inner {
            border-color: #F56C6C;
        }
    }

    ._m {
        margin-top: 12px;
    }

    ._back span {
        font-size: 14px;
    }

    ._sp span {
        font-size: 16px;
    }

</style>

<style lang="">
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[v-input-number]{
        -moz-appearance: textfield;
    }
</style>
